<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <script src="js/jquery-3.2.1.js"></script>
    <style>
        form {
            width: 400px;
            margin: auto;
            margin-top: 30px;
        }
    </style>
    <script>
        $(function() {
            var init = function(dom) {
                dom.removeClass("has-success");
                dom.removeClass("has-error");
                var span = dom.find(".form-control-feedback");
                var span2 = dom.find(".help-block");
                span.remove();
                span2.remove();
            }
            var username = $("#username");
            var usernameP = username.parent();
            console.log(usernameP);
            username.on("blur", function(e) {
                init(usernameP);
                if (username.val().length > 6) {
                    usernameP.addClass("has-success");
                    var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                    usernameP.append($(tick));
                    var help = '<span class="help-block">输入用户名正确</span>'
                    usernameP.append($(help));
                } else if (username.val() != "") {
                    usernameP.addClass("has-error");
                    var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    usernameP.append($(tick));
                    var help = '<span class="help-block">输入的用户名少于6个字母</span>';
                    usernameP.append($(help));
                } else {
                    usernameP.addClass("has-error");
                    var error = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    usernameP.append(error);
                    var help = '<span class="help-block">输入用户名为空</span>';
                    usernameP.append($(help));
                }
            });
            var password = $("#password");
            var passwordP = password.parent();
            console.log(passwordP);
            password.on("blur", function(e) {
                init(passwordP);
                if (password.val().length > 12) {
                    passwordP.addClass("has-success");
                    var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                    passwordP.append($(tick));
                    var help = '<span class="help-block">输入密码正确</span>';
                    passwordP.append($(help));
                } else if (password.val() != "") {
                    passwordP.addClass("has-error");
                    var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    passwordP.append($(tick));
                    var help = '<span class="help-block">输入的密码少于12个字母</span>';
                    passwordP.append($(help));
                } else {
                    passwordP.addClass("has-error");
                    var error = '<span class="glyphicon plyphicon-remove form-control-feedback"></span>';
                    passwordP.append(error);
                    var help = '<span class="help-block">输入密码为空</span>';
                    passwordP.append($(help));
                }
            });
            var password1 = $("#password1");
            var password1P = password1.parent();
            // password1.on("blur", function(e) {
            //     init(password1P);
            //     if (password1.val() === password.val()) {
            //         password1P.addClass("has-success");
            //         var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
            //         password1P.append($(tick));
            //     } else if (password1.val() != "") {
            //         password1P.addClass("has-error");
            //         var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
            //         password1P.append($(tick));
            //         var help = '<span class="help-block">输入的密码为空</span>';
            //         password1P.append($(help));
            //     } else {
            //         password1P.addClass("has-error");
            //         var error = '<span class="glyphicon plyphicon-remove form-control-feedback"></span>';
            //         password1P.append(error);
            //         var help = '<span class="help-block">两次密码输入不一致</span>';
            //         password1P.append($(help));
            //     }
            // })
            var btn = $(".btn");
            btn.on("click", function(e) {
                e.preventDefault();
                init(usernameP);
                if (username.val().length > 6) {
                    usernameP.addClass("has-success");
                    var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                    usernameP.append($(tick));
                    var help = '<span class="help-block">输入用户名正确</span>'
                    usernameP.append($(help));
                } else if (username.val() != "") {
                    usernameP.addClass("has-error");
                    var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    usernameP.append($(tick));
                    var help = '<span class="help-block">输入的用户名少于6个字母</span>';
                    usernameP.append($(help));
                } else {
                    usernameP.addClass("has-error");
                    var error = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    usernameP.append(error);
                    var help = '<span class="help-block">输入用户名为空</span>';
                    usernameP.append($(help));
                };
                init(passwordP);
                if (password.val().length > 12) {
                    passwordP.addClass("has-success");
                    var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                    passwordP.append($(tick));
                    var help = '<span class="help-block">输入密码正确</span>';
                    passwordP.append($(help));
                } else if (password.val() != "") {
                    passwordP.addClass("has-error");
                    var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    passwordP.append($(tick));
                    var help = '<span class="help-block">输入的密码少于12个字母</span>';
                    passwordP.append($(help));
                } else {
                    passwordP.addClass("has-error");
                    var error = '<span class="glyphicon plyphicon-remove form-control-feedback"></span>';
                    passwordP.append($(error));
                    var help = '<span class="help-block">输入密码为空</span>';
                    passwordP.append($(help));
                };
                init(password1P);
                if (password1.val() === password.val()) {
                    password1P.addClass("has-success");
                    var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                    password1P.append($(tick));
                } else if (password1.val() != "") {
                    password1P.addClass("has-error");
                    var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    password1P.append($(tick));
                    var help = '<span class="help-block">两次密码不一致</span>';
                    password1P.append($(help));
                } else {
                    password1P.addClass("has-error");
                    var error = '<span class="glyphicon plyphicon-remove form-control-feedback"></span>';
                    password1P.append($(error));
                    var help = '<span class="help-block">输入确认密码为空</span>';
                    password1P.append($(help));
                };
            })
        })
    </script>
</head>

<body>
    <form>
        <div class="form-group has-feedback">
            <label for="username">用户名:</label>
            <input class="form-control" type="text" id="username">
        </div>
        <div class="form-group has-feedback">
            <label for="password">密码:</label>
            <input class="form-control" type="password" id="password">
        </div>
        <div class="form-group has-feedback">
            <label for="password1">确认密码:</label>
            <input class="form-control" type="password" id="password1">
        </div>
        <button class="btn btn-primary">注册</button>
    </form>
</body>

</html>